<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/timecheck.css" />
		<link rel="stylesheet" href="../fonts/iconfont.css" />
		<script>
      var width =window.localStorage.getItem('width');
      document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
		</script>
		<style>
			html,
			body,
			#app {
				width: 100%;
				/*height: 100%;*/
				/*margin-bottom: 0.3rem;*/
			}
			#app{
				margin-bottom: 0.6rem;
			}
			.total-info {
				margin-top: 0.04rem;
				background-color: #FFFFFF;
				text-align: center;
				font-size: 0.22rem;
				line-height: 0.45rem;
			}
			
			table {
				font-size: 0.2rem;
				width: 100%;
				text-align: center;
				margin-top: 0.1rem;
			}
			
			table tr td{
				padding: 0.1rem 0;
				height: 0.8rem;
			}
			table,
			table,
			tbody,td div{
				text-align: center;
			}
			td span{
				display: inline-block;
				text-align: left;
				vertical-align: middle;
			}
			.bglight {
				background-color: #FFFFFF;
			}
			
			.tab-head {
				background-color: #FFFFFF;
				line-height: 0.5rem;
			}
			
			.light {
				color: #8e8a8a;
			}
			.formDiv{
				width: 100%;
				margin-top: 0.2rem;
				background-color: white;
				border-radius: 0.2rem;
				padding: 0.2rem ;
				text-align: center;
				overflow: hidden;
			}
			.formDiv p{
				margin: 0;
				color:black;
			}
			.flex{
				width: 100%;
				display: flex;
				justify-content:space-around
			 }
			.formItem{
				width: 33%;
				margin-top: 0.1rem;
			}
			.formItem p:nth-child(2){
				margin: 0.05rem 0;
			}
			.borderRight1{
				border-right:1px solid #ccc ;
			}
      .fixed{
				width: 100%;
				font-size: 0.2rem;
				background-color: white;
				border-top:1px solid #ccc ;
				border-bottom:1px solid #ccc ;
				position: fixed;
				top:1.15rem;
				z-index: 9999999;
      }
      .fixed span{
        display: inline-block;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
      }
      .display{
        display: block;
      }
      .displayNone{
        display: none;
      }
			.form{
				width: 100%;
				background-color: white;
				padding: 0.25rem 0.1rem;
				margin-top: 0.2rem;
				overflow: hidden;
			}
			.form .form-item{
				width: 49%;
				height: 2.35rem;
				background-color: #efeff4;
				text-align: center;
				border-radius: 0.2rem;
				padding: 0.2rem 0 0;
				margin-bottom: 0.2rem;
				float: left;
			}
			.form .form-item:first-child{
				margin-right: 2%;
			}
			.form .form-item p{
				margin-bottom: 0.05rem;
				color:black;
			}
			.fontSizeBig{
				font-size: 0.26rem;
			}
			.fontSizeSmall{
				font-size: 0.22rem;
			}
			.flexItem{
				width: 50%;
			}
			.form .form-item .flexItem p{
				margin-bottom: 0;
			}
			.choose{
				width: 1rem;
				margin: 0;
				text-align: center;
				padding: 0.02rem ;
				font-size: 0.18rem;
				background-color: white;
				border: 1px solid #ED7D31;
			}
			.chooseList{
				text-align: center;
				background-color: white;
				border-left: 1px solid #ED7D31;
				border-right: 1px solid #ED7D31;

			}
			.chooseList p{
				width:100%;
				margin: 0;
				padding: 0.02rem;
				border-bottom: 1px solid #ED7D31;
				font-size: 0.18rem;
				color:black;
			}
			.chooseList  .default{
				color:white;
				background-color: #ED7D31 ;
			}
			.dotDiv {
				width: 0.6rem;
				position: absolute;
				top: 0.15rem;
				right: 0;
			}

			.dotDiv .dot {
				width: 4px;
				height: 4px;
				border-radius: 2px;
				background-color: #ccc;
				margin: 0.05rem auto 0;
				/*float: right;*/
				/*margin-right: 0.05rem ;*/
			}
		</style>
	</head>

	<body>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../config.js" type="text/javascript" charset="utf-8"></script>
		<script src="../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<div id="app" class="mui-content">

			<time-check :type="2" :names='names' :dateType="dateType" :leftdata="totalData.cunScore" :rightdata="totalData.useTicket" leftunit="" rightunit="" :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
			<div class="total-info flex">
				<div class="flex-item textLeft">本店剩余积分：--</div>
			</div>
			<div  class="form">
				<div class="form-item">
					<p  class="fontSizeBig"> <strong>机器出票</strong></p>
					<p class="fontSizeSmall">收币量：{{totalData.collectCoinNum}}</p>
					<div class="flex">
						<div class=" flexItem borderRight1">
							<p class="fontSizeSmall">出票</p>
							<p class="fontSizeSmall">{{totalData.outTicket}}张</p>
							<p class="fontSizeSmall" style="color:#8e8a8a">{{totalData.outTicketNo}}张/币</p>
						</div>
						<div class="flexItem">
							<p class="fontSizeSmall">存票</p>
							<p class="fontSizeSmall">{{totalData.depositTicket}}张</p>
							<p class="fontSizeSmall" style="color:#8e8a8a">{{(totalData.depositTicketProportion*100).toFixed(2)}}%</p>
						</div>
					</div>
				</div>
				<div class="form-item" >
					<p class="fontSizeBig"> <strong>人工清票</strong></p>
					<p class="fontSizeSmall">清票次数：{{totalData.cleanTicketNum}}</p>
					<div class="flex">
						<div class=" flexItem borderRight1">
							<p class="fontSizeSmall">清票人数</p>
							<p class="fontSizeSmall">{{totalData.cleanTicketPelNum}}人</p>
						</div>
						<div class="flexItem">
							<p class="fontSizeSmall">存积分</p>
							<p class="fontSizeSmall">{{totalData.cleanTicketScore}}</p>
						</div>
					</div>
				</div>
				<div class="form-item" style="margin-right:2%;height: 2rem" >
					<p class="fontSizeBig"> <strong>卡片存积分</strong></p>
					<p class="fontSizeSmall">参与人数：{{totalData.itemTicketPelNum}}</p>
					<div class="flex">
						<div class=" flexItem borderRight1">
							<p class="fontSizeSmall">卡片张数</p>
							<p class="fontSizeSmall">{{totalData.itemTicketCardNum}}张</p>
						</div>
						<div class="flexItem">
							<p class="fontSizeSmall">存积分</p>
							<p class="fontSizeSmall">{{totalData.itemTicketScore}}</p>
						</div>
					</div>
				</div>
				<div class="form-item" style="position: relative;height: 2rem">
					<p class="fontSizeBig"> <strong>娃娃换积分</strong></p>
					<p class="fontSizeSmall">参与人数：{{totalData.peopleNum}}</p>
					<div class="dotDiv" @click="toPage('lotteryGiftExchange')">
						<p class="dot"></p>
						<p class="dot"></p>
						<p class="dot"></p>
					</div>

					<div class="flex">
						<div class=" flexItem borderRight1">
							<p class="fontSizeSmall">回收娃娃</p>
							<p class="fontSizeSmall">{{totalData.adollNum}}个</p>
						</div>
						<div class="flexItem">
							<p class="fontSizeSmall">换积分</p>
							<p class="fontSizeSmall">{{totalData.exchangeScore}}</p>
						</div>
					</div>
				</div>
				<div class="form-item" style="margin-right:2%;height: 1.6rem" >
					<p class="fontSizeBig"> <strong>手动存票</strong></p>
					<div class="flex">
						<div class=" flexItem borderRight1">
							<p class="fontSizeSmall">人数</p>
							<p class="fontSizeSmall">{{totalData.manualPelNum}}人</p>
						</div>
						<div class="flexItem">
							<p class="fontSizeSmall">存积分</p>
							<p class="fontSizeSmall">{{totalData.manualScore}}</p>
						</div>
					</div>
				</div>


			</div >









			<div class="division flex" style="position: relative">
				<div class="line"><span></span></div>
				<div class="division-word">
					设备出票报告
				</div>
				<div class="line" style="text-align: left;width:0.3rem;"><span style="width:0.7rem;"></span></div>
				<div style="position: absolute;top:0;right:0.1rem">
					<div @click="openModal" class="choose">{{chooseValue}}</div>
					<div class="chooseList" v-show="modalShow">
						<p v-for="item in sortList "  @click="choose(item.id)" :class=" sortType === item.id ? 'default' : '' "  >{{item.value}}</p>
					</div>
				</div>
			</div>
			<!---->
      <div class="fixed" :class="isFixed ===true ? 'display':'displayNone'" style="z-index: 99999">
        <span style="width:35.2%">设备</span>
        <span style="width:22%" class="light">数量</span>
        <span style="width:23%" class="light">总收币</span>
        <span style="width:17%">出票率</span>
      </div>
			<!---->
			<table>
				<tr class="tab-head "  >
					<td style="width:30%">设备</td>
					<td style="width:20%" class="light">数量</td>
					<td style="width:20%" class="light">总收币</td>
					<td style="width:15%">出票率</td>
				</tr>
				<tr v-show="totalData.games.length !== 0 "  v-for="(item,index) in deviceList" :key="index" :class="{bglight:index%2===1}" @click="toMachine(index)">
					<td style="width:30%">
						<div >
							<img style="width: 0.28rem;position:relative;top:0.05rem;float: left;margin-left: 0.2rem" src="../images/caipiao.png" alt="">
							<span style="width: 70%;text-align: left">{{item.deviceName}}</span>
						</div>
					</td>
					<td style="width:20%" class="light">
            <div style="overflow: hidden;position: relative;width: 100%;">
              <span>{{item.deviceNum ? item.deviceNum+'台' : 0 }}</span>
              <img v-show="item.deviceState ===1&&dateType===0" src="../images/troubleflag-green.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
              <img v-show="item.deviceState ===2&&dateType===0" src="../images/troubleflag-red.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
              <img v-show="item.deviceState ===3&&dateType===0" src="../images/troubleflag-gray.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
              <img v-show="item.deviceState ===4&&dateType===0" src="../images/troubleflag-gray2.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
            </div>
          </td>
					<td style="width:20%" class="light"><div><span>{{item.totalCollectCoinNum}}</span></div></td>
					<td style="width:15%"><div><span>{{item.outTicket !== '--' ? item.outTicket+'张/币' : item.outTicket }}</span></div></td>
				</tr>
			</table>
			<p v-show="totalData.games.length === 0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
				暂无数据
			</p>
      <p style="width: 100%;margin:2.5rem 0 0; padding: 0 0 0 0.1rem; text-align: left;color:white;background-color:#ED7D31;font-size: 0.22rem">数据来源：门店抄表({{totalData.timeData}})</p>

			<div class="bar">
				<p class="borderRight " @click="toPage2('incomeItem')">收入</p>
				<p class="borderRight " @click="toPage2('coinShopOperated')">收币</p>
				<p class="borderRight" @click="toPage2('rewordShopReport')">返奖</p>
				<p class="default" >出票</p>
				<p @click="toPage2('rankingList')">榜单</p>
				<p @click="toPage2('activity')">活动</p>
			</div>
    </div>
		<script type="text/javascript">
      mui.init()
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						names: { 
							leftName: '存积分',
							rightName: '用积分'
						},
						fromDate: '',
						toDate: '',
						storeId: '',
						storeName: '',
						actnum:0,
						totalData: {
              games:[]
						},
						dateType:'',
            isFixed:false,   //是否固定表头
            lastPage:'',
						top:'1rem',
            //排序
            modalShow:false,
            sortList:[
              {id:0,value:'按名称'},
              {id:1,value:'按数量'},
              {id:2,value:'按总收币'},
              {id:3,value:'按出票率'},
            ],
            sortType:0,
            chooseValue:'按名称',
            int:0,    //0 点击第一次 张开  1 关闭
            deviceList:[
              {
                "deviceId":0,
                "deviceName":"小sadfddadada马",
                "deviceModel":"XFXM",
                "deviceNum":4,
                "totalCollectCoinNum":0,
                "outTicket":0,
                "outTicketNo":0
              }
						],
					}
				},
        mounted :function(){
          var vm =  this
          mui.plusReady(function() {
            vm.receiveParams()
          })
          window.addEventListener('scroll', this.handleScroll)
        },
				methods: {
					receiveParams: function() {
						var sf = plus.webview.currentWebview()
						this.toDate = sf.toDate
						this.storeId = sf.storeId
						this.storeName = sf.storeName
						this.fromDate = sf.fromDate
            this.actnum  = sf.actnum
            this.dateType  = sf.dateType
            this.lastPage = sf.lastPage ? sf.lastPage : false
            if(this.lastPage){
              this.closePage()
            }
					},
					loadData: function() {
						var vm = this;
						config.ajax({
							url: '/phone/fanStorePrize',
							data: {
                fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
                toDate: new Date(vm.toDate).format('yyyyMMdd'),
								storeId: vm.storeId,
								storeName: vm.storeName,
                checkType:3,  //3  彩票
							},
							success: function(res) {
							  console.log('列表数据：'+JSON.stringify(res))
								if(res.result === 1){
									vm.totalData = res.FanStoreAward;
									vm.deviceList=JSON.parse(JSON.stringify(res.FanStoreAward.games))
									var startTime=vm.totalData.fromDateNew.toString();
									var endTime=vm.totalData.toDateNew.toString();
									var timeData='';
                  timeData=startTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1"+'.'+"$2"+"."+"$3")+'-'+endTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1"+'.'+"$2"+"."+"$3");
                  vm.totalData.timeData=timeData;
                  if(vm.deviceList.length !==0){
                    vm.sortFun();
                  }
								} else{
									mui.toast(res.errormsg)
								}
							},
							error:function(res){
								mui.toast(res.errormsg)
							}
						})
					},
					toMachine: function(index) {
						var vm = this
						mui.openWindow({
							url: 'lotteryDeviceList.html',
							id: 'lotteryDeviceList',
							styles: {
								titleNView: {
									titleText: vm.fromDate +'至' + vm.toDate,
									titleColor: "#FFFFFF",
									titleSize: "14px",
									backgroundColor: "#FF6800",
									autoBackButton: true,
									buttons: [{
										fontWeight: 'normal',
										fontSize: '18px',
										float: 'right',
										fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
										text: "\ue602",
										onclick: function() {
											var allPage = plus.webview.all()
											var nowPage = plus.webview.getWebviewById('index')
											for(var i = 0; i < allPage.length; i++) {
												if(allPage[i].getURL() !== nowPage.getURL()) {
													plus.webview.close(allPage[i]);
												}
											}
										}
									}],
									splitLine: {
										color: "#CCCCCC",
										height: "1px"
									}
								}
							},
							extras: {
                deviceId: vm.deviceList[index].deviceId,
                deviceModel: vm.deviceList[index].deviceModel,
                deviceName:vm.deviceList[index].deviceName,
                fromDate: vm.fromDate,
								toDate: vm.toDate,
								storeName:vm.storeName,
								storeId:vm.storeId,
                dateType:vm.dateType
							}
						});
					},
          handleScroll:function(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(scrollTop > 350){
              vm.isFixed=true;
              vm.top='1.75rem'
            }else {
              vm.isFixed=false;
              vm.top='1.18rem'
            }
          },
          toPage2:function(url){
            var vm = this;
            var storeName=vm.storeName;
            mui.openWindow({
              url: './'+url+'.html',
              id: url,
              styles: {
                titleNView: {
                  titleText:  storeName,
                  titleColor: "#FFFFFF",
                  titleSize: "17px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  buttons: [{
                    fontWeight: 'normal',
                    fontSize: '18px',
                    float: 'right',
                    fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                    text: "\ue602",
                    onclick: function() {
                      var allPage = plus.webview.all()
                      var nowPage = plus.webview.getWebviewById('index')
                      for(var i = 0; i < allPage.length; i++) {
                        if(allPage[i].getURL() !== nowPage.getURL()) {
                          plus.webview.close(allPage[i]);
                        }
                      }
                    }
                  }],
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                storeId: vm.storeId,
                storeName: vm.storeName,
                fromDate: vm.fromDate,
                toDate:vm.toDate,
                dateType:vm.dateType,
                actnum: vm.actnum,
                lastPage: 'lotteryStore',
              },
              createNew:true,
            });
          },
          closePage:function(){
            var vm=this;
            var allPage = plus.webview.all()
            var nowPage = plus.webview.getWebviewById(vm.lastPage)
            for(var i = 0; i < allPage.length; i++) {
              if(allPage[i].getURL() === nowPage.getURL()) {
                plus.webview.hide(allPage[i]);
                plus.webview.close(allPage[i]);
              }
            }
          },
          openModal:function(){
            if(vm.int === 0){
              this.modalShow=true;
              vm.int =1
            }else if(vm.int ===1){
              this.modalShow=false;
              vm.int =0
            }
          },
          //选择排序type
          choose:function(id){
            vm.sortType =id;
            vm.chooseValue = vm.sortList[id].value;
            vm.modalShow=false;
            vm.int=0;
            vm.sortFun();
          },
          //排序fun
          sortFun:function(){
            if(vm.sortType === 0){
              vm.deviceList = vm.deviceList.sort(function compareFunction(item1, item2) {
                return (item1.deviceModel).localeCompare(item2.deviceModel);
              });
            }else if(vm.sortType === 1){
              vm.deviceList.sort(function(a,b){
                var last=b.deviceNum !=='--' ? b.deviceNum : -1;
                var next=a.deviceNum !=='--' ? a.deviceNum : -1;
                return last - next
              })
            }else if(vm.sortType === 2){
              vm.deviceList.sort(function(a,b){
                var last=b.totalCollectCoinNum !=='--' ? b.totalCollectCoinNum : -1;
                var next=a.totalCollectCoinNum !=='--' ? a.totalCollectCoinNum : -1;
                return last - next
              })
            }else if(vm.sortType === 3){
              vm.deviceList.sort(function(a,b){
                var last=b.outTicket !=='--' ? b.outTicket : -1;
                var next=a.outTicket !=='--' ? a.outTicket : -1;
                return last - next
              })
            }
          },
//娃娃换积分详情页面
          toPage:function(url){
            var vm = this;
            var storeName=vm.storeName;
            mui.openWindow({
              url: './'+url+'.html',
              id: url,
              styles: {
                titleNView: {
                  titleText:  storeName,
                  titleColor: "#FFFFFF",
                  titleSize: "17px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                storeId: vm.storeId,
                storeName: vm.storeName,
                fromDate: vm.fromDate,
                toDate:vm.toDate,
                dateType:vm.dateType,
                actnum: vm.actnum,
                lastPage: 'incomeItem',
              },
              createNew:true,
            });
          },

				},
				watch: {
					fromDate: function() {
						this.loadData()
					}
				}
			})
		</script>
	</body>

</html>